<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="app-logo flex-center flex-column">
			<view class="radius-10 app-logo_shadow position-relative">
				<u--image :showLoading="true" :src="configInfo.app_icon" width="150rpx" height="150rpx"></u--image>
			</view>
			<view class="app_slogan m-t-md">
				<u-transition :show="true" mode="fade-up">
					<text class="badge app-logo_slogan-badge">{{configInfo.app_slogan}}</text>
				</u-transition>
			</view>
		</view>
		<view class="conter">
			<u-cell-group :border="false">
				<u-cell :border="false" v-if="configInfo.app_name">
					<text slot="title" class="cell-title">{{$t('setting.app-title')}}</text>
					<view slot="value" class="cell-value">
						<text>{{ configInfo.app_name }}</text>
					</view>
				</u-cell>
				<u-cell :border="false" v-if="configInfo.app_name">
					<text slot="title" class="cell-title">{{$t('setting.version')}}</text>
					<view slot="value" class="cell-value">
						<text>v{{ version }}</text>
					</view>
				</u-cell>
				<u-cell :isLink="false" :border="false" v-if="checkVersion" @click="checkVres">
					<text slot="title" class="cell-title">{{$t('setting.version-title')}}</text>
					<view slot="value" class="cell-value">
						<text>{{ version }}</text>
					</view>
				</u-cell>
				<u-cell :isLink="false" :border="false" @click="clearCache">
					<text slot="title" class="cell-title">{{$t('setting.cache-title')}}</text>
					<!-- <view slot="value" class="cell-value text-xs">
						<text>占用空间{{ cacheSize }}M</text>
					</view> -->
				</u-cell>
<!-- 				<u-cell :isLink="true" :border="false" @click="">
					<text slot="title" class="cell-title">关于我们</text>
				</u-cell> -->

			</u-cell-group>
			<u-cell-group :border="false">
				<u-cell :isLink="true" :border="false" @click="$util.go('setting/language')">
					<text slot="title" class="cell-title">{{$t('setting.language-title')}}</text>
				</u-cell>
			</u-cell-group>
			
			<u-cell-group :border="false">
				<u-cell :isLink="true" :border="false" v-if="configInfo.user_agree_id" @click="$util.go('article/article_detail?id='+configInfo.user_agree_id)">
					<text slot="title" class="cell-title">{{$t('setting.service-agree')}}</text>
				</u-cell>
				<u-cell :isLink="true" :border="false" v-if="configInfo.user_privacy_id" @click="$util.go('article/article_detail?id='+configInfo.user_privacy_id)">
					<text slot="title" class="cell-title">{{$t('setting.conceal-agree')}}</text>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="flex-column flex-center">
			<view style="width: 56%;">
				<!-- #ifdef APP-PLUS -->
				<m-button shape="circle" :text="$t('setting.check-version')" :loading="appUplodaBtnLoading" @submit="updateApp"></m-button>
				<!-- #endif -->
				<view class="m-t-sm">
					<u-button type="warning" :plain="true" shape="circle" :text="$t('setting.login-off')" @click="exitModal = true"></u-button>
				</view>
			</view>
		</view>
		<view class="flex-center m-t-md">
			<!-- #ifdef APP-PLUS -->
			<view class="text-sm text-secondary" @click="$util.go('https://beian.miit.gov.cn/', {type:'link', is_tips:false})" >
				备案号：{{configInfo.app_icp_beian}}
			</view>
			<!-- #endif -->
		</view>
		<m-modal
			:show="exitModal"
			:content="$t('setting.login-off-modal-title')"
			:btn="$t('setting.login-off-modal-btn')"
			@btnComplete="signOut"
			@close="exitModal = false"
		></m-modal>
		
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
	// #endif
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				version:'1.0.0',
				cacheSize:0,
				exitModal:false,
				checkVersion:false,
				scrollTop:0,
				appUplodaBtnLoading: false
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		
		
		/* 页面加载 */
		onLoad(option){
			let thos = this
			uni.getSystemInfo({
				success: function (res) {
					thos.version = res.appVersion;
				}
			});
		},
		
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		/* 页面显示 */
		async onShow(){
			// this.Common.checkLogin(true);
			
			// this.version = getApp().globalData.version;
			
			// // 获取基础设置
			// this.setting = await this.Common.getAppSets();
			
			// this.getCacheSize();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapMutations(['updateUserState']),
			...mapActions(['getUserInfo']),
			
			//版本检测
			checkVres(){
				var appInfo = uni.getAppBaseInfo();
				uni.showToast({title:appInfo.appVersion,icon:'none'});
				// const version = getApp().globalData.version;
				// uni.showToast({title:version,icon:'none'});
				
			},
			
			// 获取当前缓存大小
			getCacheSize(){

			},
			
			// 清除缓存
			clearCache(){
				this.$util.showLoading(this.$t('setting.cache-loading'))
				this.$util.clearCache()
				this.$util.showToast(this.$t('setting.cache-success'))
			},
			
			// 退出登录
			signOut(){
				let thos = this
				thos.$util.showLoading(thos.$t('setting.off-loading'))
				try {
					thos.$util.clearCache(true)
					let arr = ['authToken', 'userInfo']
					arr.map(stateKey => {
						thos.updateUserState({
							key : stateKey,
							val : ''
						})
					})
					thos.exitModal = false
					thos.$util.showToast(thos.$t('setting.off-success'),function(){
						thos.$util.goNavigateBack()
					})
					// this.$util.goNavigateBack()
				} catch (e) {
					thos.$util.showToast(this.$t('setting.off-fail'))
				}
			},
			
			updateApp(){
				this.appUplodaBtnLoading = true
				APPUpdate(true)
				this.appUplodaBtnLoading = false
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F3F3;
	}
	.app-logo{
		padding-top: 100rpx;
		margin-bottom: 50rpx;
		&_shadow{
			position: relative;
			box-shadow: 0px 5px 5px #00000020;
		}
		// &_slogan{
		// 	top: -10px;
		// 	left: 100rpx;
		// 	position: absolute;
		// }
		/deep/ image{
			border-radius: 10px!important;
		}
	}
	
	.u-cell-group{
		margin-bottom: 15px;
	}

	.exit-btn{
		background-color: #fff;
		color: var(--main-color-2);
		text-align: center;
		height: 44px;
		line-height: 44px;
		border-radius: 10px;
		overflow: hidden;
		text{
			// font-weight: bold;
			font-size: $contentSize;
		}
	}
</style>
